
<!-- <link rel="stylesheet" type="text/css" href="../../../public_src/css/normalize.css">
<link rel="stylesheet" type="text/css" href="../../../public_src/css/public.css">
<link rel="stylesheet" type="text/css" href="../../../css/css_modules/service/index.css"> -->

<div class="service jsService" data-id="">
  <!-- 订单列表 -->
  <div id="order" class="orders">
    <div class="order-container">
      <ul id="orderMain">
        <li>
          <h3 class="order-header">[普吉]普吉普吉普吉普吉普吉普吉普吉普吉普吉普吉普吉普吉</h3>
          <section class="order-footer">
            <span class="price-num">¥ 99.00 x 2</span>
            <span class="time">2016-09-26 18:09:23</span>
          </section>
        </li>
      </ul>
    </div>
  </div>
  <div class="chat-container">
    <!-- <div class="send-info s-clearfix">
      <img class="avatar s-left" src="../imgs/logo.png">
      <div class="content">
        <p class="time">
          2016-09-19 12:28:50
        </p>
        <p class="msg send-color">
          四面四面四面四面四面四面四面四面四面四面四面四面四面四面四面四面四面四面四面四面四面四面四面四面四面四面四面四面四面四面四面四面四面四面四面四面四面四面四面四面四面四面四面四面四面四面四面四面四面四面四面四面四面四面四面四面
        </p>
      </div>
    </div>
    <div class="receive-info s-clearfix">
      <img class="avatar s-right d" src="../imgs/logo.png">
      <div class="content">
        <p class="time">
          2016-09-19 12:28:50
        </p>
        <p class="msg receive-color">
          四面四
        </p>
      </div>
    </div>
    <div class="receive-info s-clearfix">
      <img class="avatar s-right d" src="../imgs/logo.png">
      <div class="content">
        <p class="time">
          2016-09-19 12:28:50
        </p>
        <p class="msg receive-color" id="test">
          
        </p>
      </div>
    </div> -->
  </div>


  <div class="send-msg dp-f jsSendMsg">
    <input type="text" name="msg" class="send-input boxf-b jsSendInput">
    <button class="send-img"><input class="img-input" type="file" name="imageFile" data-event="img" accept="image/*" contenteditable="false"></button>
    <button class="quick-btn send-btn jsQuickBtn" data-event="quick" data-target=".service">快捷</button>
    <button class="send-btn s-hide jsSendBtn" data-event="msg">发送</button>
  </div>
  <!-- 查看图片 -->
  <div id="wrapper" class="img-enlarge-bg s-hide jsEnlargeBg" data-event="close" data-target=".jsEnlargeBg">
    <div id="scroller" class="img-enlarge">
      <img class="jsEnlarge" src="../imgs/loading.gif" data-event="close" data-target=".jsEnlargeBg">
    </div>
  </div>

  <!-- 新消息提示气泡 -->
  <div class="has-msg s-hide">
    有新消息
  </div>

</div>
<div class="m-modal-bg s-m-modal s-hide" id="fail" data-xm-closetar="1">
  <div class="m-modal-container">
    <div class="m-modal-row">
      <div class="m-modal-body">
        <div class="m-modal-header">
          <p class="js-warn-content">发送失败，请重新发送！</p>
        </div>
        <div class="m-modal-mainn">
          <button class="js-fail confirm" data-target="#fail">知道了</button>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="quickreply s-hide jsQuickreply">
  <div class="main">
    <ul class="jsReplyContainer">
      <!-- <li class="" data-event="li">
        快捷回复快捷回复快捷回复快捷回复快捷回复快捷回复快捷回复
      </li>
      <li class="select" data-event="li">
        快捷回复快捷回复快捷回复快捷回复快捷回复快捷回复快捷回复
      </li>
      <li data-event="li">
        <img src="../imgs/logo.png">
      </li> -->
    </ul>
  </div>
  <div class="label">
    <label>~ 没有更多了 ~</label>
  </div>
  <button class="use-btn" data-event="use" data-clear=".select">使用</button>
</div>

<script type="text/template" id="replyTpl">
  <% for(var k in list){%>
    <li class="" data-id="<%=list[k].id%>" data-select="select" data-event="li" data-type="<%=list[k].type%>">
      <% if(list[k].type==1){%>
        <%=list[k].content%>
      <% }else{ %>
        <img src="/<%=list[k].content%>">
      <% } %>
    </li>
  <% } %>
</script>

<script type="text/template" id="msgItemTpl">
  <% for(var k in list) {%>
    <% if(list[k].is_kf === '0') {%>
    <div class="receive-info s-clearfix" data-id="<%=list[k].id%>">
      <img class="avatar s-left" src="<%=list[k].user_avatar%>">
      <div class="content">
        <p class="time">
          <%=list[k].create_at%>
        </p>
        <div class="msg receive-color">
          <% if(list[k].type === '2') {%>
          <p class="img-container img-start">
          <img src="../imgs/loading.gif" data-url="<%=list[k].thumb%>" data-deferr="1" data-event="enImg" data-img="<%=list[k].msg%>">
          </p>
          <% }else{ %>
          <%=list[k].msg%>
          <% } %>
        </div>
      </div>
    </div>
    <% } %>
    <% if(list[k].is_kf !== '0') {%>
    <div class="send-info s-clearfix" data-id="<%=list[k].id%>">
      <img class="avatar s-right" src="<%=list[k].kf_avatar%>">
      <div class="content">
        <p class="time">
          <%=list[k].create_at%>
        </p>
        <div class="msg send-color">
          <% if(list[k].type === '2') {%>
          <p class="img-container img-start">
          <img src="../imgs/loading.gif" data-url="<%=list[k].thumb%>" data-deferr="1" data-event="enImg" data-img="<%=list[k].msg%>">
          </p>
          <% }else{ %>
          <%=list[k].msg%>
          <% } %>
        </div>
      </div>
    </div>
    <% } %>
    
  <% } %>

</script>

<script type="text/template" id="orderItemTpl">
  <% for(var k in list){%>
    <li data-id="<%=list[k].id%>">
      <h3 class="order-header"><%=list[k].title%></h3>
      <section class="order-footer">
        <span class="price-num">¥ <%=list[k].price%> x <%=list[k].num%></span>
        <span class="time"><%=list[k].pay_time%></span>
      </section>
    </li>
    <% } %>
</script>